<template>
    <div class="page" style="">
      <div class="print_title">档案查阅单详情 · 禾美环保</div>
      <p class="title">基本信息</p>
      <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
        <PrintCol title="单据编号" :value="formData.billNo" />
        <PrintCol title="申请人" :value="formData.employeeId_dictText" />
        <PrintCol title="申请部门" :value="formData.departId_dictText" />
        <PrintCol title="申请时间" :value="formData.createTime" />
        <PrintCol title="申请人所属团队" :value="formData.teamId_dictText" />
      </a-row>
  
      <p class="title" style="margin-top: 18px;">查阅信息</p>
      <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
        <PrintCol title="档案大类" :value="formData.docBigCategory_dictText" />
        <PrintCol title="档案小类" :value="formData.docSmallCategory_dictText" />
        <PrintCol title="文件名称" :value="formData.docBillNo" />
        <PrintCol title="密级" :value="formData.docClassification_dictText" />
        <PrintCol title="存放位置" :value="formData.docAddress" />
        <PrintCol title="档案所属团队" :value="formData.docTeamId_dictText" />
        <PrintCol title="是否外带" :value="formData.isOutside_dictText" />
        <PrintCol title="借阅时间" :value="formData.referenceTime" />
        <PrintCol title="份数" :value="formData.totalNumber" />
        <PrintCol title="预计归还时间" :value="formData.backTime" />
        <PrintCol title="借阅事由" :value="formData.referenceReason" />
      </a-row>
      
      <!-- 附件信息 -->
      <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length" title="附件信息"></FileInfor>
      <FileInfor :purchaseFile="file" v-if="file && file.length" title="任务附件信息"></FileInfor>
      <!-- 流程详情 -->
      <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
    </div>
  </template>
  <script>
  import { getAction } from '@/api/manage'
  import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
  import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
  import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
  
  const PrintCol = {
    props: {
      span: {
        type: Number,
        default: 12
      },
      title: {
        type: String,
        default: ''
      },
      value: {
        // type: [String, Number],
        default: ''
      }
    },
    render() {
      const { title, value } = this
      return (
        <a-col span={ 12 }>
          <a-row style="margin-bottom: 0">
            <a-col style="display: flex;">
              <p style="margin-bottom: 0; white-space: nowrap">{ title }:</p>
              <p style="margin:0 0 0 6px; word-break: break-all;">{ value }</p>
            </a-col>
          </a-row>
        </a-col>
      )
    }
  }
  
  export default {
    props: {
      formBpm: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: () => { },
        required: true
      },
      formDataHistory: {
        type: [Object, String],
        default: () => { },
        required: true
      }
    },
    components: {
      FileInfor,
      ProcessInfor,
      PrintCol
    },
    data() {
      return {
        filterMultiDictText,
        dictOptions: {},
        dataHistorySource: [], // 流程列表
  
        templateDataList: [], // 进度模板列表
        progressNodeVoList: [], // 款项进度列表
        url: {
          historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
          queryByIds: '/api/erp/administration/seal/erpSealCertificationChangeRecord/queryByIds2', // 印章列表
          // queryById: '/api/erp/omc/task/erpOmcTaskDistribution/queryById', // 獲取詳情
          erpOmcProjectQueryById: '/api/erp/omc/project/erpOmcProject/queryById',
          // queryPageList: '/api/erp/omc/project/erpOmcProjectTaskFinal/queryPageList'
          queryById: '/api/erp/task/erpOmcTaskRedistribution/queryById',
          // erpOmcProjectQueryById: '/api/erp/task/project/erpOmcProject/queryById',
          queryPageList: '/api/erp/omc/project/erpOmcProjectTaskFinal/queryPageList',
          generatedFormNumber: '/api/erp/base/generatedFormNumber',
          queryBaseInfoById: '/api/erp/oa/doc/erpOaDocBaseInfo/queryById',
          queryArchiveFileById: "/api/erp/omc/projectarchive/erpProjectArchiveFile/queryById",
        },
        cust_lxr: 'erp_omc_customer_manager_contact,lxr,id,del_flag=0 and main_id=0',
        purchaseFile: [], // 附件
        file: [] // 任务附件
      };
    },
    watch: {
      formData: {
        async handler(val) {
          if (val) {
            this.cust_lxr = await 'erp_omc_customer_manager_contact,lxr,id,del_flag=0 and main_id=\'' + val.ownerUnit + '\'';
            // 获取项目编号
            // this.getProjectNumber(val.projectId)
            // this.getChildTableList(val.id)
            // this.getTaskNumber(val.taskId)
            // this.initDictConfig() // 字典值
            this.getDocBillNo();
            if (val.attachment) {
              this.purchaseFile = val.attachment.split(',')
            } else {
              this.purchaseFile = []
            }
            if (val.file) {
              this.file = val.file.split(',')
            } else {
              this.file = []
            }
          }
        },
        immediate: true
      },
      formDataHistory: {
        handler(val) {
          if (val) {
            this.getHistoryList()
          }
        },
        immediate: true
      }
    },
    methods: {
      getDocBillNo() {
        // 加载关联的档案基础信息
        if (this.formData.docName && (this.formData.docBigCategory=='A04A01' || this.formData.docBigCategory=='A04A02')) {
          getAction(this.url.queryBaseInfoById, { 'id':this.formData.docName }).then((res) => {
            if (res.success) {
              let data = res.result
              this.$set(this.formData,"docBillNo",data.billNo);
            }
          })
        }else if (this.formData.docName && (this.formData.docBigCategory!='A04A01' && this.formData.docBigCategory!='A04A02')) {
          getAction(this.url.queryArchiveFileById, { 'id':this.formData.docName }).then((res) => {
            if (res.success) {
              let data = res.result
              this.$set(this.formData,"docBillNo",data.fileNo);
            }
          })
        }
      },

      // 获取列表
      getHistoryList() {
        var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
        getAction(this.url.historyList, params).then(res => {
          if (res.success) {
            this.dataHistorySource = res.result.records || res.result
          }
        })
      },
  
      // 获取项目数据
      getProjectNumber(projectId) {
        if (projectId) {
          getAction(this.url.erpOmcProjectQueryById, { id: projectId }).then((res) => {
            if (res.success) {
              var event = res.result
              this.$set(this.formData, 'finalNo', event.finalNo) // 项目编号
            }
          })
        }
      },
      // 获取子表
      getChildTableList(mainId) {
        if (mainId) {
          getAction('/api/erp/task/erpOmcTaskRedistributionDt/queryByMainId', { mainId }).then(response => {
            this.$set(this.formData, 'reredistributionDtList', response.result || [])
          })
        }
      },
      // 获取开始的款项进度列表
      queryPaymentListByProjectId(taskId, flag) {
        getAction('/api/erp/omc/task/erpOmcTaskDistribution/queryTaskPaymentList', { taskId }).then((res) => {
          if (res.success) {
            this.progressNodeVoList = res.result
          }
        })
      },
      // 获取项目数据
      getTaskNumber(taskId) {
        // // 获取任务编号
        if (taskId) {
          getAction(this.url.queryPageList, { id: taskId }).then((res) => {
            if (res.success) {
              if (res.result.records && res.result.records.length) {
                var event = res.result.records[0]
                this.$set(this.formData, 'taskNo', event.billNo) // 任务编号
              }
            }
          })
        }
      },
  
      initDictConfig() {
        // 人员名称
        initDictOptions('erp_employee_file,name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'handlerId', res.result)
            this.$set(this.dictOptions, 'undertaker', res.result)
            this.$set(this.dictOptions, 'minister', res.result)
            this.$set(this.dictOptions, 'projectLeading', res.result)
            this.$set(this.dictOptions, 'approvalEngineer', res.result)
            this.$set(this.dictOptions, 'projectMember', res.result)
          }
        })
        // 部门名称
        initDictOptions('sys_depart,depart_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'handlerDeptId', res.result)
            this.$set(this.dictOptions, 'executeDepart', res.result)
          }
        })
        // 团队名称
        initDictOptions('erp_omc_team_manager,alias_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'teamName', res.result)
            this.$set(this.dictOptions, 'productTeam', res.result)
          }
        })
        // 单位
        initDictOptions('erp_company_files,file_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'signUnit', res.result)
          }
        })
        // 业主单位
        initDictOptions('erp_purchase_supplier,enterprise_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'ownerUnit', res.result)
          }
        })
        // 联系人
        initDictOptions(this.cust_lxr).then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'contacts', res.result)
          }
        })
        // 项目来源
        initDictOptions('xmly_type').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'projectSource', res.result)
          }
        })
        // 任务类型
        initDictOptions('task_type').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'taskType', res.result)
          }
        })
        // 审批级别
        initDictOptions('approval_level').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'approvalLevel', res.result)
          }
        })
        // 行业类别
        initDictOptions('industry_category').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'industryCategory', res.result)
          }
        })
        // 复杂程度
        initDictOptions('industry_coefficient').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'complexity', res.result)
          }
        })
        // 是否出具报告
        initDictOptions('YES_OR_NO').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'isOutReport', res.result)
          }
        })
        // 是否出具报告
        initDictOptions('expense_accounting_method').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'expenseAccountingMethod', res.result)
          }
        })
      },
  
      tableRowClass(record, index) {
        if (index == 0) {
          return 'rowClass';
        }
        return ''
      }
    }
  };
  </script>
  <style lang="less" scoped>
  .page {
    background: #ffffff;
    padding: 19px 28px 0 28px;
    width: 750px;
  
    .print_title {
      font-size: 15px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 9px;
    }
  
    .title {
      background: #EEEEEE;
      font-size: 13px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
      padding: 11px 9px;
    }
  
    .content {
      font-size: 13px;
    }
  
    .title_table {
      font-size: 13px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
    }
  }
  
  /deep/ .rowClass {
    font-size: 10px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
  }
  
  /deep/ .ant-table-thead th {
    font-size: 10px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
  }
  
  /deep/ .ant-table-thead tr {
    background: #EEEEEE;
  }
  
  /deep/ .ant-table-small>.ant-table-content>.ant-table-body {
    margin: 0 0px;
  }
  
  /deep/ .ant-table-body tr {
    font-size: 10px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
  }
  
  /deep/ .ant-table-body tr td {
    word-wrap: break-word;
    word-break: break-all;
  }
  
  .content {
    font-size: 13px;
  }</style>
  